<template>
    <div id="homepage">
        <!--头部-->
        <div id="head">
            <div
                style="height:40px;width:200px;float:left;margin-top:20px;cursor:pointer;font-size:20px;text-align: center;"
                @click="changeLeftCollapseStatus">
                APGS运维工具<i class="el-icon-magic-stick" style="font-size:30px;"></i>
            </div>

            <div
                style="height:40px;width:200px;float:right;margin-right:20px;margin-top:20px;cursor:pointer;font-size:20px;">
                欢迎你，{{userName}}
            </div>

        </div>
        <!--左侧菜单栏-->
        <div id="sideMenu">
            <div style="height:100%;">
                <el-scrollbar style="height:100%">
                    <el-menu :default-active="sideMenuDefaultActive" :default-openeds="sideMenuDefaultOpeneds"  :router="true" class="el-menu-vertical-demo"
                             :collapse="!isSideMenuOpen" :unique-opened="uniqueOpened">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-setting"></i>
                                <span slot="title">Gemfire维护</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="/gemfire/param">Gemfire参数维护</el-menu-item>
                                <el-menu-item index="/gemfire/flow">Gemfire流水数据</el-menu-item>
                                <el-menu-item index="/gemfire/tradeTest">交易测试</el-menu-item>
                                <el-menu-item index="/gemfire/region">Region</el-menu-item>
                                <el-menu-item index="/gemfire/reloadSend">单点重发</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-setting"></i>
                                <span slot="title">Redis维护</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="/redis/param">Redis参数维护</el-menu-item>
                                <el-menu-item index="/redis/flow">ES流水数据</el-menu-item>
                                <el-menu-item index="/redis/clean">Redis数据清理</el-menu-item>
                                <el-menu-item index="/redis/flow/tradeTest">交易测试</el-menu-item>
                                <el-menu-item index="/redis/flow/tradeCodeParam">发送参数表</el-menu-item>
                                <el-menu-item index="/redis/region">Redis流水数据</el-menu-item>
                                <el-menu-item index="/redis/queue">同步队列</el-menu-item>
                                <el-menu-item index="/redis/queue/retrykey">失败补偿</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <el-submenu index="3">
                            <template slot="title">
                                <i class="el-icon-setting"></i>
                                <span slot="title">流程信息维护</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="/process/workflow">流程信息查询</el-menu-item>
                                <el-menu-item index="/process/resolve">异常解决</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <el-submenu index="4">
                            <template slot="title">
                                <i class="el-icon-setting"></i>
                                <span slot="title">其他工具</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="/util/jsonConversion">JSON转换</el-menu-item>
                                <el-submenu index="4-1">
                                    <template slot="title">开关切换</template>
                                    <el-menu-item index="/util/appdaoswitch/list">开关配置列表</el-menu-item>
                                    <el-menu-item index="/util/appdaoswitch">应用切换</el-menu-item>
                                    <el-menu-item index="/util/appdaoswitch/common">公共切换</el-menu-item>
                                    <el-menu-item index="/util/appdaoswitch/apssswitch">流程引擎切换</el-menu-item>
                                </el-submenu>
                                <el-menu-item index="/util/loganalysis">应用日志分析</el-menu-item>
                                <el-menu-item index="/util/logexcelresult">应用日志结果</el-menu-item>
                                <el-menu-item index="/util/datacompare">应用数据比较</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <el-submenu index="5">
                            <template slot="title">
                                <i class="el-icon-setting"></i>
                                <span slot="title">提出提回系统</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="/payback/businessoperation">业务操作(新)</el-menu-item>
                                <el-menu-item index="/payback/querymaintain">查询维护</el-menu-item>
                                <el-menu-item index="/payback/businessvolumestat">业务量统计</el-menu-item>
                                <el-menu-item index="/payback/businesstrack">业务轨迹</el-menu-item>
                                <el-menu-item index="/payback/businessvolumehistory">历史业务量</el-menu-item>
                                <el-menu-item index="/payback/makeupfortransaction">补偿交易</el-menu-item>
                                <el-menu-item index="/payback/addresscheck">地址校验</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-scrollbar>
            </div>
        </div>

        <!--核心模块-->
        <div id="coreModule"
             v-bind:class={coreModuleWithSideMenuOpen:isSideMenuOpen,coreModuleWithSideMenuClose:!isSideMenuOpen}>
            <div id="breadCrumbModule">
                <slot name="breadcrumbmodule"></slot>
            </div>

            <div id="coreChildModule">
                <div style="width:calc(100% - 30px);min-height:500px;margin:15px;">
                    <slot name="corechildmodule"></slot>
                </div>

            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name: "HomePage",
        props: {
            sideMenuDefaultOpeneds:{
                type: Array,
                default: ['1']
            },
            sideMenuDefaultActive:{
                type:String,
                default:'/gemfire/param'
            }
        },
        data() {
            return {
                uniqueOpened: true,//左侧导航栏是否唯一打开
                //左侧导航栏是否打开
                isSideMenuOpen: true,
                //登录用户名
                userName: '',
            };
        },
        //生命周期完成事件
        mounted() {
            var localStorage = window.localStorage;
            this.userName = localStorage.getItem("userName");
        },
        methods: {
            //改变左侧折叠栏的状态
            changeLeftCollapseStatus() {
                var self = this;
                var isSideMenuOpen = self.isSideMenuOpen;
                //左侧折叠栏打开
                if (isSideMenuOpen) {
                    self.isSideMenuOpen = false;
                } else {
                    self.isSideMenuOpen = true;
                }
            }
        }
    }
</script>

<style type="text/css">

    /**
     * el-menu设置宽度和最小高度
    */
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }

    #homepage {
        width: 100%;
        height: 100%;
    }

    #head {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 70px;
        z-index: 301;
        min-width: 1000px;
        border-bottom: 1px solid rgb(220, 223, 230);
        background-color: #FFFFFF;
        position: fixed;
    }

    /**
    左侧菜单栏
     */
    #sideMenu {
        padding: 0;
        margin-top: 70px;
        height: calc(100% - 70px);
        z-index: 301;
        position: fixed;
        float: left;
    }

    /**
    核心模块
     */
    #coreModule {
        /**
        宽度变化在0.4s完成
         */
        transition: width .4s;
        margin-top: 70px;
        height: 1000px;
        position: absolute;
        right: 0;
        z-index: 300;
        border-bottom: 1px solid rgb(220, 223, 230);
        -webkit-transform: translateZ(0);
    }

    /**
    左侧导航栏打开的时候的核心模块样式
     */
    .coreModuleWithSideMenuOpen {
        width: calc(100% - 200px);
    }

    /**
    左侧导航栏关闭时候的核心模块样式
     */
    .coreModuleWithSideMenuClose {
        width: calc(100% - 64px);
    }

    #coreChildModule {
        width: 100%;
        min-height: 800px;
    }

    #breadCrumbModule {
        width: calc(100% - 30px);
        height: 50px;
        margin-top: 15px;
        margin-left: 15px;
        border: 1px solid #EBEEF5;
        background-color: #FFF;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    }

</style>
